<template>
  <div id="holographic">
    <div class="btns">
      <ul>
        <li><a class="btn" @click="changeData('day')">日</a></li>
        <li><a class="btn" @click="changeData('week')">周</a></li>
        <li><a class="btn" @click="changeData('month')">月</a></li>
        <li><a class="btn" @click="changeData('quarter')">季</a></li>
        <li><a class="btn" @click="changeData('year')">年</a></li>
      </ul>
    </div>
    <div class="holographic" ref="holographic_ref"></div>
  </div>
</template>

<script>
import { getHolographicData } from "@/api/apis";
export default {
  components: {},
  data() {
    return {
      holographicChart: null, //全局图表对象
      allData: null, // 服务端返回的数据
    };
  },
  mounted() {},
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  created() {},
  methods: {
    initMoudle() {
      this.initChart();
      this.getData();
      window.addEventListener("resize", this.screenAdapter);
      // 页面加载时进行屏幕适配
      this.screenAdapter();
    },
    // 初始化图表
    initChart() {
      this.holographicChart = this.$echarts.init(this.$refs.holographic_ref);
      var option = {
        backgroundColor: "#fff",
        title: {
          text: "全息健康度",
          left: "5%",
          top: "1%",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
          },
        },
        // 控制图的大小
        grid: {
          top: "15%",
          left: "0%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        legend: {
          data: ["全息健康度"],
          textStyle: {
            color: "black",
          },
          right: "10%",
          top: "5%",
        },
        toolbox: {
          show: true,
          orient: "vertical",
          feature: {
            mark: {
              show: true,
            },
            dataView: {
              show: true,
              readOnly: false,
            },
            magicType: {
              show: true,
              type: ["line", "bar"],
            },
            restore: {
              show: true,
            },
            saveAsImage: {
              show: true,
            },
          },
        },
        calculable: false,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              show: true,
              textStyle: {
                color: "black", //X轴文字颜色
                fontSize: 8,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            axisLabel: {
              formatter: "{value} ",
              color: "black",
              textStyle: {
                fontSize: 8,
                // overflow: "break",
              },
            },
            // 坐标轴轴线
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ccc",
              },
            },
          },
        ],
        series: [
          {
            name: "全息健康度",
            type: "line",
            radius: "65%",
            center: ["50%", "50%"],
            lineStyle: {
              normal: {
                // width: 8, // 线的粗细
                color: {
                  type: "linear",
                  colorStops: [
                    {
                      offset: 0,
                      color: "#57BD9F", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#19BC8C", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            itemStyle: {
              normal: {
                color: "#57BD9F",
                borderColor: "#57BD9F",
              },
            },
          },
        ],
      };
      this.holographicChart.setOption(option);
    },
    // 获取数据
    async getData() {
      let params = {
        code : this.$store.state.civilCode,
        group: this.$store.state.groupType
      };
      await getHolographicData(params).then((res) => {
        if (res.code === 200) {
          this.allData = res.data;
          this.updateChart();
        } else {
          this.$msg({
            message: `全息健康度暂无数据，请重试！！！`,
            type: "warning",
          });
        }
      });
    },
    // 更新图表
    updateChart() {
      // const times = this.allData.map((item) => {
      //   return item.time;
      // });
      const scores = this.allData.map((item) => {
        return parseInt(item.health);
      });
      const scores2 = this.allData.map((item) => {
        return item.diagtime;
      });
      var option = {
        grid: {
          x: 20,
        },
        xAxis: [
          {
            data: scores2,
            axisLabel: {
              interval: "",
              rotate: 40,
            },
          },
        ],
        series: [
          {
            data: scores,
          },
        ],
      };
      this.holographicChart.setOption(option);
    },
       // 切换数据（日、周、月、季、年）
    async changeData(arg) {
      this.$store.commit('setGroupType',arg)
      this.initMoudle()
    },
    // 屏幕适配
    screenAdapter() {
      const titleFontSize =
        (this.$refs.holographic_ref.offsetWidth / 100) * 2.6;
      const option = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
      };
      this.holographicChart.setOption(option);
      this.holographicChart.resize();
    },
  },
};
</script>

<style scoped>
#holographic{
  width: 100%;
  height: 100%;
  position: relative;
}
.btns {
  position: absolute;
  left: 20%;
  top: -10px;
  z-index: 1;
}
.btns li {
  float: left;
  width: 30px;
  line-height: 20px;
  background-color: #67c23a;
  border-color: #67c23a;
  border-radius: 5px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  margin: 0 5px;
}
.holographic {
  width: 100%;
  height: 100%;
}
</style>